<template>
    <!-- 客户管理-客户资料修改列表页面 -->
    <div class="fillcontain baseInfo">
        <el-form :model="searchParams" :rules="rules" ref="ruleForm" label-width="100px" class="search_container">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="客户姓名" prop="customerName">
                        <el-input clearable v-model="searchParams.customerName" placeholder="客户姓名" @blur='deleteParam(1)'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="证件号码" prop="idNo">
                        <el-input clearable v-model="searchParams.idNo" placeholder="证件号码" @blur='deleteParam(2)'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="客户号" prop="customerNo">
                        <el-input clearable v-model="searchParams.customerNo" placeholder="客户号" @blur='deleteParam(3)'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6" class="text_center">
                    <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
                    <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="contain">
            <!-- 操作按钮 -->
            <el-row class="bgfff pb15">
                <el-col :span="24" class="pt5">
                    <el-button type="danger" plain @click="customerInfoAdd">新增</el-button>
                </el-col>
            </el-row>
            <div class="table_container">
                <el-table v-loading="loading" :data="tableData" @row-dblclick="customerPro" highlight-current-row header-cell-class-name="table-header-class"
                    style="width:100%">
                    <el-table-column width="20" property="mark" label=" ">
                        <template slot-scope="scope">
                            <span v-if="scope.row.mark=='C'">+</span>
                            <span v-else-if="scope.row.mark=='D'">D</span>
                            <span v-else>{{scope.row.mark}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="120" show-overflow-tooltip property="customerNo" label="客户号" align='center'>
                    </el-table-column>
                    <el-table-column min-width="120" show-overflow-tooltip property="idNo" label="证件号码" align='center'>
                    </el-table-column>
                    <el-table-column min-width="120" show-overflow-tooltip property="customerName" label="客户姓名" align='center'>
                    </el-table-column>
                    <el-table-column min-width="80" show-overflow-tooltip property="sex" label="性别" :formatter="ifsexType" align='center'>
                    </el-table-column>
                    <el-table-column min-width="120" show-overflow-tooltip property="birthday" label="出生年月" align='center'>
                    </el-table-column>
                    <el-table-column min-width="180" show-overflow-tooltip property="address" label="地址" align='center'>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" align='center'>
                        <template slot-scope="scope">
                            <span class="operationIcon mr5" @click="customerPro(scope.row)">
                                <!-- 编辑 -->
                                <el-tooltip class="item" effect="light" content="编辑" placement="top">
                                    <i class="el-icon-edit"></i>
                                </el-tooltip>
                            </span>
                            <span class="operationIcon ml5" @click="customerDel(scope.row)">
                                <!-- 删除 -->
                                <el-tooltip class="item" effect="light" content="删除" placement="top">
                                    <i class="el-icon-delete"></i>
                                </el-tooltip>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col :span="24">
                        <div class="pagination">
                            <el-pagination background v-if='paginations.total > 0' :page-sizes="paginations.pageSizes" :page-size="paginations.pageSize"
                                :layout="paginations.layout" :total="paginations.total" :current-page='paginations.pageIndex'
                                @current-change='handleCurrentChange' @size-change='handleSizeChange'>
                            </el-pagination>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex'
    import constant from '@/utils/constant';
    import manageConstants from '@/utils/manageConstants.js';
    import { getCustomerInfoList, deleteCustomerInfo } from "@/api/customermanage/customerManage.js";
    export default {
        data() {
            return {
                // 查询条件
                rules: {
                    customerNo: [],
                    customerName: [],
                    idNo: [],
                },
                searchParams: {
                    customerNo: '', //客户号
                    customerName: '', //客户姓名
                    idNo: '', // 证件号码
                },
                tableData: [],
                loading: false,
                sexType: manageConstants.sexType,
                //需要给分页组件传的信息
                paginations: {
                    total: 0,        // 总数
                    pageIndex: 1,  // 当前位于哪页
                    pageSize: 10,   // 1页显示多少条
                    pageSizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                }
            }
        },
        activated() {
            //页面初始化方法
            this.$set(this.searchParams, 'idNo', '');
            this.$set(this.searchParams, 'customerName', '');
            this.searchParams.customerNo = this.$route.query.clntNo;
            if (this.searchParams.customerNo) {
                this.getList();
            }
        },
        methods: {
            //清空参数
            deleteParam(name) {
                if (name == '1' && this.searchParams.customerName != '') {
                    this.searchParams.idNo = '';
                    this.searchParams.customerNo = '';
                }
                if (name == '2' && this.searchParams.idNo != '') {
                    this.searchParams.customerNo = '';
                    this.searchParams.customerName = '';
                }
                if (name == '3' && this.searchParams.customerNo != '') {
                    this.searchParams.idNo = '';
                    this.searchParams.customerName = '';
                }

            },
            //删除
            customerDel(item) {
                // vip数据管控start
                if(item.mark.indexOf("*") !== -1){
                    this.$message({
                        message: '该数据为vip保单客户,暂无操作权限!',
                        type: 'error'
                    });
                    return false
                }
                // vip数据管控end
                let msg = "确定要删除客户:" + item.customerName + "的客户资料吗？";
                this.$confirm(msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let para = item.customerNo;
                    this.$store.dispatch('loading/CHANGE_LOADING', true)
                    deleteCustomerInfo(para).then(res => {
                        this.$store.dispatch('loading/CHANGE_LOADING', false)
                        if (res.resultCode == constant.SUCCESS) {
                            this.$alert('删除成功', '', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    this.getList();
                                }
                            });

                        }
                    }).catch(err => {
                        this.$store.dispatch('loading/CHANGE_LOADING', false);
                    })
                })
            },
            //编辑
            customerPro(item) {
                // vip数据管控start
                if(item.mark.indexOf("*") !== -1){
                    this.$message({
                        message: '该数据为vip保单客户,暂无操作权限!',
                        type: 'error'
                    });
                    return false
                }
                // vip数据管控end
                this.$router.push({
                    path: "/customer/customerInfoIndAdd", query: {
                        customerNo: item.customerNo,
                        sourcePage: 'customerInfoModify',
                        update: 'Y'
                    }
                })
            },
            //新增
            customerInfoAdd() {
                this.$router.push({
                    path: "/customer/customerInfoIndAdd", query: {
                        update: 'N'
                    }
                })

            },

            // 查询列表
            getList() {
                this.paginations.total = 0;
                this.tableData = [];
                let para = {
                    "customerNo": this.searchParams.customerNo,
                    "customerName": this.searchParams.customerName,
                    "idNo": this.searchParams.idNo,
                    "pageSize": this.paginations.pageSize,
                    "pageNumber": this.paginations.pageIndex,
                    "menu": '1', //客户信息修改菜单
                }
                if (!para.customerNo && !para.customerName && !para.idNo) {
                    this.$message({
                        message: '请至少输入一个查询条件来查询！',
                        type: 'error'
                    });
                    return false
                }
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                getCustomerInfoList(para).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    if (res.resultCode == constant.SUCCESS && res.data.list.length) {
                        this.paginations.total = res.data.total;
                        this.tableData = res.data.list;
                    } else {
                        this.$message({
                            message: '无符合条件资料！',
                            type: 'error'
                        });
                        this.tableData = [];
                        this.paginations.total = 0;
                    }
                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false);
                })
            },
            // 每页多少条切换
            handleSizeChange(pageSize) {
                this.paginations.pageSize = pageSize;
                this.getList();
            },
            // 上下分页
            handleCurrentChange(page) {
                this.paginations.pageIndex = page;
                this.getList();
            },
            // 根据条件查询列表
            subGetList() {
                this.paginations.pageIndex = 1;
                this.getList();
            },
            // 清除查询条件
            resetSearch() {
                this.searchParams.customerNo = '';
                this.searchParams.customerName = '';
                this.searchParams.idNo = '';
            },
            ifsexType(val) {
                if (val.sex == 'M') { return '男' }
                if (val.sex == 'F') { return '女' }
                if (val.sex == 'U') { return '不明' }
            },


        },
        computed: {
            ...mapGetters(['tags']),
            reload() {
                return this.$store.state.loading.reload;
            }
        },
    }

</script>

<style lang="less" scoped>
    .fillcontain {
        padding-bottom: 0;
    }

    .contain {
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }

    .pagination {
        padding: 10px 20px;
        text-align: right;
    }

    .operationIcon {
        // padding: 12px;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow: 0 0 3px #f9f9f9;
    }

    .search_container {
        padding: 20px 20px 0 20px; // border-top: 1px solid #e1e1e1;
    }
</style>
